<template>
  <div class="layout">
    <div class="logo">
      <img src="../../assets/images/logo@1x.png" alt="" />
    </div>
    <div class="navbar">
      <!-- 菜单区 -->
      <div class="menu">
        <span>个人设置</span>
        <span>个人主题</span>
        <span>听歌识曲</span>
      </div>
      <!-- 搜索区 -->
      <div class="search">
        <input class="search-input" type="text" placeholder="请输入内容" v-model="inputVal" />
        <el-icon :size="21" color="#C0C4CC"><Search /></el-icon>
      </div>
      <!-- 头像与通知 -->
      <div class="tx-tz">
        <!-- 徽章 -->
        <el-badge :value="1" class="item">
          <el-icon :size="21" color="#000"><Bell /></el-icon>
        </el-badge>
        <!-- 头像 -->
        <el-image @mouseenter="isShowMenu = !isShowMenu" :src="img" fit="cover" />
        <!-- 菜单栏 -->
        <template v-if="isShowMenu">
          <div class="menus" @click="handleClickMenu" @mouseleave="isShowMenu = false">
            <div class="menu-item" v-for="item in menuList" :key="item" :data-item="item">
              {{ item }}
            </div>
            <!-- <div class="menu-item" :data-index="2">账号设置</div>
          <div class="menu-item" :data-index="3">退出</div> -->
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Bell } from '@element-plus/icons-vue'
import img from '../../assets/images/hero (1) 1@1x.png'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()
const inputVal = ref('')
const isShowMenu = ref(false)
const menuList = ref(['个人主页', '账号设置', '退出'])

const handleClickMenu = (event) => {
  // const target = event.target
  // // 检查是否点击了 .list-item
  // if (target.closest('.menu-item')) {
  //   const listItem = target.closest('.menu-item')
  //   console.log(listItem);

  //   const index = Array.from(listItem.parentNode.children).indexOf(listItem)
  //   console.log(`点击了第 ${index + 1} 个列表项`)
  //   // 这里可以执行其他逻辑，比如播放对应的音乐
  // }

  const target = event.target

  // 检查是否点击了 .list-item
  if (target.closest('.menu-item')) {
    const listItem = target.closest('.menu-item')
    const item = listItem.getAttribute('data-item')
    if (item === '退出') {
      userStore.removeUser()
      sessionStorage.removeItem('userState')
      router.push('/login')
    } else if (item === '个人主页') {
      router.push('/user/homepage')
    } else {
      // 账号设置
    }
    isShowMenu.value = false
  }
}
</script>

<style lang="scss">
.layout {
  display: flex;
  align-content: center;

  .logo {
    width: 200px;
    height: 80px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .navbar {
    padding: 0 23px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .menu {
      span {
        margin-right: 16px;
        font-size: 14px;
        line-height: 24px;
      }
    }

    .search {
      position: relative;
      width: 582px;
      border: 1px solid #dcdfe6;
      overflow: hidden;
      border-radius: 15px;
      background-color: transparent;

      .search-input {
        padding: 8px 0 8px 33px;
        width: 100%;
        height: 100%;
        outline: none;
        border: transparent;

        &::-webkit-input-placeholder {
          font-size: 14px;
          line-height: 24px;
          display: flex;
          align-items: center;
          color: #c0c4cc;
        }
      }

      .search-input:focus {
        border-color: #dcdfe6;
        box-shadow: none;
      }

      i {
        position: absolute;
        top: 50%;
        left: 13px;
        transform: translateY(-50%);
        width: 13.53px;
        height: 13.53px;

        svg {
          width: 100%;
          height: 100%;
          color: #c0c4cc;
        }
      }
    }
  }

  .tx-tz {
    display: none;
    position: relative;
    margin-right: 53px;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-image {
      margin-left: 35px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .menus {
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);

      width: 180px;
      background-color: #c0c4cc;
      z-index: 999;
      border-radius: 25px;
      overflow: hidden;

      .menu-item {
        padding: 15px 15px;
        font-size: 14px;

        &:hover {
          background-color: #e7e1e1;
        }
      }
    }
  }
}
</style>
